<template>
  <div class="app-container">
    <el-row>
      <el-button type="primary" @click="$router.push({path:'edit'})"
        >新 增</el-button
      >
    </el-row>
    <br />
    <el-row>
      <el-input
        placeholder="请输入内容"
        v-model="queryForm.keyword"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </el-row>
    <br />

    <el-popover
      v-for="item in listData"
      :key="item.id"
      placement="top-start"
      width="200"
      trigger="hover"
      :content="item.description"
    >
      <el-card
        slot="reference"
        :body-style="{ padding: '0px' }"
        shadow="hover"
        class="card-componentitem"
        :title="item.description"
      >
        <el-image
          style="width: 100%; height: 150px"
          :src="(item.cover || {}).fileId|getResourceUrl"
          fit="fill"
        ></el-image>

        <!-- <img
          style="width:100%;height:100%"
          :src="getResourceUrl((item.cover || {}).fileId)"
          onerror="javascript:this.src='https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'"
          class="image"
        /> -->
        <div style="padding: 14px;">
          <span>{{ item.name }}</span>
          <p></p>
          <div class="bottom clearfix">
            <el-button
              icon="el-icon-view"
              @click="$refs.previewForm.show({ id: item.id })"
              circle
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="$router.push({ path: 'edit', query: { id: item.id } })"
              circle
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-document-copy"
              @click="copyComponent(item.id)"
              circle
            ></el-button>
             <el-button
              type="danger"
              icon="el-icon-delete"
              @click="deleteComponent(item.id)"
              circle
            ></el-button>
          </div>
        </div>
      </el-card>
    </el-popover>

    <previewForm ref="previewForm"></previewForm>
  </div>
</template>

<script>
import resourceApi from "@/api/resource";
import previewForm from "./previewForm";

export default {
  components: {  previewForm },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    },
    getResourceUrl(fileId) {
      return resourceApi.getResourceUrl(fileId);
    }
  },
  data() {
    return {
      loading: false,
      queryForm: {
        keyword: ""
      },
      listData: [],
      listLoading: true
    };
  },
  created() {},
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$store
        .dispatch("middleware/getAll")
        .then(res => {
          this.listData = res.items;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    deleteComponent(id) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$store.dispatch("middleware/delete", id).then(res => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.loadData();
        });
      });
    },

    copyComponent(id) {
      this.$store.dispatch("middleware/copy", id).then(res => {
        this.$router.push({ path: 'edit', query: { id: res.id } })
        this.loadData();
      });
    }
  }
};
</script>

<style scoped>
.card-componentitem {
  width: 236px;
  margin: 10px;
  float: left;
}
</style>
